<template>
  <div class="dkhs">
    <div class="dkhs-img">
      <img :src="dkhsData.img" alt="">
    </div>
    <p>{{ dkhsData.desc }}</p >
  </div>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';

const props = defineProps({
  dkhsData: {
    type: Object,
    required: true
  }
});
</script>

<style scoped>
.dkhs {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 10px;
  text-align: center;
  width: 25%;
}

.dkhs-img {
  width: 50px;
  height: 50px;
  margin-right: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dkhs-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.dkhs p {
  font-size: 14px;
  color: #333;
  margin: 0;
  text-align: left;
  font-weight: 500;
}
</style>